<!DOCTYPE html><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<meta http-equiv="X-UA-Compatible" content="IE=Edge" ><title>vPanel - Widgets</title><link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight,light,regular,bold" media="screen" rel="stylesheet" type="text/css" >
<link href="http://fonts.googleapis.com/css?family=PT+Serif+Caption" media="screen" rel="stylesheet" type="text/css" >
<link href="css/reset.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/grid.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/elfinder.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/jquery.ui.datatables.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/jquery.slidernav.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/jquery.fullcalendar.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/ui/default-ui/ui.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/ui/default-ui/portlet.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/ui/default-ui/jquery.ui.uniform.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/ui/default-ui/colors/jquery.ui.colors.default.css" media="screen" rel="stylesheet" type="text/css" class="uicolor" >
<link href="css/forms.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/prettify.css" media="screen" rel="stylesheet" type="text/css" >
<!--[if lt IE 8]> <link href="css/ie.css" media="screen" rel="stylesheet" type="text/css" ><![endif]--><!--[if lt IE 9]> <script type="text/javascript" src="js/html5.js"></script><![endif]-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.selectors.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/overlay.apple.js"></script>
<script type="text/javascript" src="js/jquery.ui.min.js"></script>
<script type="text/javascript" src="js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/jquery.slidernav.js"></script>
<script type="text/javascript" src="js/jquery.fullcalendar.min.js"></script>
<script type="text/javascript" src="js/jquery.isotope.min.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/supersubs.js"></script>
<script type="text/javascript" src="js/elfinder.full.js"></script>
<script type="text/javascript" src="js/prettify/prettify.js"></script>
<script type="text/javascript" src="js/global.js"></script>
<!--[if lt IE 9]> <script type="text/javascript" src="js/selectivizr.js"></script><![endif]-->
<!--[if lt IE 8]> <script type="text/javascript" src="js/ie.js"></script><![endif]-->
<script>
	$(function() {
		var availableTags = [
			"ActionScript",
			"AppleScript",
			"Asp",
			"BASIC",
			"C",
			"C++",
			"Clojure",
			"COBOL",
			"ColdFusion",
			"Erlang",
			"Fortran",
			"Groovy",
			"Haskell",
			"Java",
			"JavaScript",
			"Lisp",
			"Perl",
			"PHP",
			"Python",
			"Ruby",
			"Scala",
			"Scheme"
		];
		$( "#quick-search" ).autocomplete({
			source: availableTags
		});
	});
</script>

<!-- LOADING SCRIPT -->
<script>
$(window).load(function(){
    $("#loading").fadeOut(function(){
        $(this).remove();
        $('body').removeAttr('style');
    });
});
</script>

<style type = "text/css">
    #container {position: absolute; top:50%; left:50%;}
    #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
    #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
    #loadinggraphic {margin-right: 0.2em; margin-bottom:-2px;}
    #loading {background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0; z-index: 9999;}
</style> 
<!-- LOADING SCRIPT END -->

</head>
<body>

    <div id="loading"> 
        <script type = "text/javascript"> 
            document.write("<div id='container'><p id='content'>" +
                           "<img id='loadinggraphic' width='16' height='16' src='images/ajax-loader-eeeeee.gif' /> " +
                           "Loading...</p></div>");
        </script> 
    </div> 
    
    <div id="wrapper" class="clearfix">
        <header class="container_8 clearfix">
            <div class="grid_8">
                <h1>vPanel</h1>
                <form class="fr">
                    <input id="quick-search" type="text" placeholder="Search..." />
                </form>
                <nav>
                    <ul class="sf-menu clearfix">
                        <li class="active"><a href="dashboard.htm">Dashboard</a>
                            <ul>
                                <li><a href="activity.htm">Activity</a></li>
                                <li><a href="files.htm">Files</a></li>
                                <li><a href="calendar.htm">Calendar</a></li>
                                <li><a href="contacts.htm">Contacts</a></li>
                            </ul>
                        </li>
                        <li ><a href="#">Features</a>
                            <ul>
                                <li><a href="wysiwyg.htm">WYSIWYG</a></li>
                                <li><a href="forms.htm">Forms</a></li>
                                <li><a href="widgets.htm">Widgets</a></li>
                                <li><a href="tables.htm">Tables</a></li>
                                <li><a href="styles.htm">Styles</a></li>
                                <li><a href="navicons.htm">Nav Icons</a></li>
                                <li><a href="grid.htm">Grid System</a></li>
                            </ul>
                        </li>
                        <li ><a href="themes.htm">Themes</a></li>
                        <li><a href="#">Sample Menu</a>
                            <ul>
                                <li><a href="#">menuitem 1</a></li>
                                <li><a href="#">menuitem 2</a></li>
                                <li><a href="#">menuitem 3</a></li>
                                <li><a href="#">menuitem 4</a></li>
                                <li><a href="#">Sample Submenu</a>
                                    <ul>
                                        <li><a href="#">submenu 1</a></li>
                                        <li><a href="#">submenu 2</a></li>
                                        <li><a href="#">submenu 3</a></li>
                                        <li><a href="#">submenu 4</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="fr"><a href="#" class="arrow-down">hfh</a>
                            <ul>
                                <li><a href="account.htm">Account</a></li>
                                <li><a href="account.htm">Users</a></li>
                                <li><a href="account.htm">Groups</a></li>
                                <li><a href="account.htm">Help</a></li>
                                <li><a href="logout.htm">Sign out</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>
        
        <section>
            <div class="container_8 clearfix">                

                <!-- Main Section -->

                <section class="main-section grid_8">
                    <nav>
                        <a class="chevron" href="#">&raquo;</a>
                        <ul>
                            <li><a href="wysiwyg.htm" class="navicon-folder-open">WYSIWYG</a></li>
                            <li><a href="forms.htm" class="navicon-id-card">Forms</a></li>
                            <li class="current"><a href="widgets.htm" class="navicon-window">Widgets</a></li>
                            <li><a href="tables.htm" class="navicon-table">Tables</a></li>
                            <li><a href="styles.htm" class="navicon-palette">Styles</a></li>
                            <li><a href="navicons.htm" class="navicon-photos">Nav Icons</a></li>
                            <li><a href="grid.htm" class="navicon-grid">Grid System</a></li>
                        </ul>
                    </nav>

                    <div class="main-content">
                        <header>
                            <ul class="action-buttons clearfix">
                                <li><a id="opener" class="button">Simple Dialog</a></li>
                            </ul>
                            <h2>Widgets</h2>
                        </header>

                        <section class="container_6 clearfix">
                            <!-- Accordion Section -->
                            <div class="grid_3">
                                <div class="accordion clearfix">
                                    <header class="current"><a href="#">Pane 1</a></header>
                                    <section style="display:block">
                                        <h3>What is Lorem Ipsum</h3>
                                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                                        <h3>Where does it come from?</h3>
                                        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p>
                                    </section>

                                    <header><a href="#">Pane 2</a></header>
                                    <section>
                                        <h3>What is Lorem Ipsum</h3>
                                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                                        <h3>Where does it come from?</h3>
                                        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p>
                                    </section>

                                    <header><a href="#">Pane 3</a></header>
                                    <section>
                                        <h3>What is Lorem Ipsum</h3>
                                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                                        <h3>Where does it come from?</h3>
                                        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p>
                                    </section>

                                    <header><a href="#">Pane 4</a></header>
                                    <section>
                                        <h3>What is Lorem Ipsum</h3>
                                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                                        <h3>Where does it come from?</h3>
                                        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p>
                                    </section>
                                </div>
                            </div>
                            <!-- End Accordion Section -->

                            <!-- Sidebar Section -->
                            <div class="grid_3">
                                <div class="sidebar-tabs">
                                    <ul>
                                        <li><a href="#sidebarpane-1">Sidebar 1</a></li>
                                        <li><a href="#sidebarpane-2">Sidebar 2</a></li>
                                        <li><a href="#sidebarpane-3">Sidebar 3</a></li>
                                        <li><a href="#sidebarpane-4">Sidebar 4</a></li>
                                    </ul>
                                    <section id="sidebarpane-1">
                                        <h3>Sidebar 1</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim eleifend luctus. Fusce vel nunc neque. Fusce pulvinar placerat vestibulum. Praesent scelerisque massa non tellus molestie eu mattis mauris tristique. In urna magna, suscipit ac vestibulum a, lobortis vel enim. Nunc egestas nisi magna. Cras aliquam gravida orci ut semper. Vivamus auctor, nibh id lobortis consequat, augue elit ornare mi, ac aliquet justo odio eu nulla. Nulla ipsum nulla, iaculis nec fringilla blandit, aliquet a sem. Morbi dapibus dolor vitae libero semper sagittis. Ut hendrerit, mi a eleifend consequat, nisi neque blandit quam, nec malesuada turpis velit ac metus. Nullam a pulvinar mi. Sed lobortis sem non metus condimentum fringilla. Fusce vestibulum ultrices sapien, id molestie risus sollicitudin ultricies. Sed scelerisque posuere bibendum. Maecenas luctus, diam eget ultrices rhoncus, est elit scelerisque lectus, quis interdum mi magna in urna. Mauris vitae euismod ligula.</p>
                                    </section>
                                    <section id="sidebarpane-2">
                                        <h3>Sidebar 2</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim eleifend luctus. Fusce vel nunc neque. Fusce pulvinar placerat vestibulum. Praesent scelerisque massa non tellus molestie eu mattis mauris tristique. In urna magna, suscipit ac vestibulum a, lobortis vel enim. Nunc egestas nisi magna. Cras aliquam gravida orci ut semper. Vivamus auctor, nibh id lobortis consequat, augue elit ornare mi, ac aliquet justo odio eu nulla. Nulla ipsum nulla, iaculis nec fringilla blandit, aliquet a sem. Morbi dapibus dolor vitae libero semper sagittis. Ut hendrerit, mi a eleifend consequat, nisi neque blandit quam, nec malesuada turpis velit ac metus. Nullam a pulvinar mi. Sed lobortis sem non metus condimentum fringilla. Fusce vestibulum ultrices sapien, id molestie risus sollicitudin ultricies. Sed scelerisque posuere bibendum. Maecenas luctus, diam eget ultrices rhoncus, est elit scelerisque lectus, quis interdum mi magna in urna. Mauris vitae euismod ligula.</p>
                                    </section>
                                    <section id="sidebarpane-3">
                                        <h3>Sidebar 3</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim eleifend luctus. Fusce vel nunc neque. Fusce pulvinar placerat vestibulum. Praesent scelerisque massa non tellus molestie eu mattis mauris tristique. In urna magna, suscipit ac vestibulum a, lobortis vel enim. Nunc egestas nisi magna. Cras aliquam gravida orci ut semper. Vivamus auctor, nibh id lobortis consequat, augue elit ornare mi, ac aliquet justo odio eu nulla. Nulla ipsum nulla, iaculis nec fringilla blandit, aliquet a sem. Morbi dapibus dolor vitae libero semper sagittis. Ut hendrerit, mi a eleifend consequat, nisi neque blandit quam, nec malesuada turpis velit ac metus. Nullam a pulvinar mi. Sed lobortis sem non metus condimentum fringilla. Fusce vestibulum ultrices sapien, id molestie risus sollicitudin ultricies. Sed scelerisque posuere bibendum. Maecenas luctus, diam eget ultrices rhoncus, est elit scelerisque lectus, quis interdum mi magna in urna. Mauris vitae euismod ligula.</p>
                                    </section>
                                    <section id="sidebarpane-4">
                                        <h3>Sidebar 4</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim eleifend luctus. Fusce vel nunc neque. Fusce pulvinar placerat vestibulum. Praesent scelerisque massa non tellus molestie eu mattis mauris tristique. In urna magna, suscipit ac vestibulum a, lobortis vel enim. Nunc egestas nisi magna. Cras aliquam gravida orci ut semper. Vivamus auctor, nibh id lobortis consequat, augue elit ornare mi, ac aliquet justo odio eu nulla. Nulla ipsum nulla, iaculis nec fringilla blandit, aliquet a sem. Morbi dapibus dolor vitae libero semper sagittis. Ut hendrerit, mi a eleifend consequat, nisi neque blandit quam, nec malesuada turpis velit ac metus. Nullam a pulvinar mi. Sed lobortis sem non metus condimentum fringilla. Fusce vestibulum ultrices sapien, id molestie risus sollicitudin ultricies. Sed scelerisque posuere bibendum. Maecenas luctus, diam eget ultrices rhoncus, est elit scelerisque lectus, quis interdum mi magna in urna. Mauris vitae euismod ligula.</p>
                                    </section>
                                </div>
                            </div>
                            <!-- End Sidebar Section -->

                            <div class="clear"></div>

                            <!-- Tabs Section -->
                            <div class="grid_6 leading">
                                <div class="tabs">
                                    <ul>
                                        <li><a href="#pane-1">Slider - Basic</a></li>
                                        <li><a href="#pane-2">Slider - Vertical</a></li>
                                        <li><a href="#pane-3">Slider - Events</a></li>
                                    </ul>

                                    <!-- tab "panes" -->
                                    <section id="pane-1">
                                        <div class="sliders clearfix">
                                            <h3>Default Functionality</h3>
                                            <input type="range" />
                                            <p>The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.</p>
                                            <h4>Basic HTML</h4>
                                            <pre class="prettyprint lang-html">&lt;input type="range" /&gt;</pre>
                                            <br />

                                            <h3>Snap to increments</h3>
                                            <input type="range" value="100" min="0" max="200" step="10" />
                                            <p>Increment slider values with the step option set to an integer, commonly a dividend of the slider's maximum value. The default increment is 1.</p>
                                            <h4>Basic HTML</h4>
                                            <pre class="prettyprint lang-html">&lt;input type="range" value="100" min="0" max="200" step="10" /&gt;</pre>
                                            <br />
                                            
                                            <h3>Range slider</h3>
                                            <input type="range" min="0" max="700" data-range="true" data-values="75,300" />
                                            <p>Set the data-range option to true to capture a range of values with two drag handles. The space between the handles is filled with a different background color to indicate those values are selected.</p>
                                            <h4>Basic HTML</h4>
                                            <pre class="prettyprint lang-html">&lt;input type="range" class="slider" min="0" max="700" data-range="true" data-values="75,300" /&gt;</pre>
                                            <br />
                                            
                                            <h3>Range with fixed minimum</h3>
                                            <input type="range" value="100" min="1" max="700" data-range="min" />
                                            <p>Fix the minimum value of the range slider so that the user can only select a maximum. Set the data-range option to "min".</p>
                                            <h4>Basic HTML</h4>
                                            <pre class="prettyprint lang-html">&lt;input type="range" value="100" min="1" max="700" data-range="min" /&gt;</pre>
                                            <br />
                                            
                                            <h3>Range with fixed maximum</h3>
                                            <input type="range" value="2" min="1" max="10" data-range="max" />
                                            <p>Fix the maximum value of the range slider so that the user can only select a minimum. Set the data-range option to "max".</p>
                                            <h4>Basic HTML</h4>
                                            <pre class="prettyprint lang-html">&lt;input type="range" value="2" min="1" max="10" data-range="max" /&gt;</pre>
                                        </div>
                                    </section>
                                    <section id="pane-2">
                                        <div class="vertical-sliders clearfix">
                                            <h3>Default Functionality</h3>
                                            <input type="range" data-orientation="vertical" />
                                            <div class="clear"></div>
                                            <p>The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.</p>
                                            <h4>Basic HTML</h4>
                                            <pre class="prettyprint lang-html">&lt;input type="range" data-orientation="vertical" /&gt;</pre>
                                            <br />
                                            <h3>Other examples from the Slider - Basic section</h3>
                                            <input type="range" value="100" min="0" max="200" step="50" data-orientation="vertical" />
                                            <input type="range" min="0" max="700" data-range="true" data-values="75,300" data-orientation="vertical" />
                                            <input type="range" value="100" min="1" max="700" data-range="min" data-orientation="vertical" />
                                            <input type="range" value="2" min="1" max="10" data-range="max" data-orientation="vertical" />
                                        </div>
                                    </section>
                                    <section id="pane-3">
                                        <p>Events can easily be attached to range sliders using the onchange event handler.</p>
                                        <h3>Sample Usage</h3>
                                        <div class="sliders">
                                            <input id="my-range" type="range" value="50" />
                                            <br />
                                            <input id="my-range-value" type="text" value="50" class="full" readonly />
                                            <script>
                                            $("#my-range").change(function(){
                                                $("#my-range-value").val($(this).val());
                                            });
                                            </script>
                                        </div>
                                        <h4>JavaScript</h4>
                                        <pre class="prettyprint linenums lang-js">
$("#my-range").change(function(){
    $("#my-range-value").val($(this).val());
});
</pre>
                                    </section>
                                </div>
                            </div>
                            <!-- End Tabs Section -->
                            
                            <!-- Tabs inside Portlet -->
                            <div class="grid_6 leading">
                                <div class="portlet">
                                    <header>
                                        <h2>Tabs inside Portlet</h2>
                                    </header>
                                    <section>
                                        <div class="tabs">
                                            <ul>
                                                <li><a href="#portlet-pane-1">Tab 1</a></li>
                                                <li><a href="#portlet-pane-2">Tab 2</a></li>
                                                <li><a href="#portlet-pane-3">Tab 3</a></li>
                                            </ul>
                                            <section id="portlet-pane-1">
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim eleifend luctus. Fusce vel nunc neque. Fusce pulvinar placerat vestibulum. Praesent scelerisque massa non tellus molestie eu mattis mauris tristique. In urna magna, suscipit ac vestibulum a, lobortis vel enim. Nunc egestas nisi magna. Cras aliquam gravida orci ut semper. Vivamus auctor, nibh id lobortis consequat, augue elit ornare mi, ac aliquet justo odio eu nulla. Nulla ipsum nulla, iaculis nec fringilla blandit, aliquet a sem. Morbi dapibus dolor vitae libero semper sagittis. Ut hendrerit, mi a eleifend consequat, nisi neque blandit quam, nec malesuada turpis velit ac metus. Nullam a pulvinar mi. Sed lobortis sem non metus condimentum fringilla. Fusce vestibulum ultrices sapien, id molestie risus sollicitudin ultricies. Sed scelerisque posuere bibendum. Maecenas luctus, diam eget ultrices rhoncus, est elit scelerisque lectus, quis interdum mi magna in urna. Mauris vitae euismod ligula.</p>
                                            </section>
                                            <section id="portlet-pane-2">
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim eleifend luctus. Fusce vel nunc neque. Fusce pulvinar placerat vestibulum. Praesent scelerisque massa non tellus molestie eu mattis mauris tristique. In urna magna, suscipit ac vestibulum a, lobortis vel enim. Nunc egestas nisi magna. Cras aliquam gravida orci ut semper. Vivamus auctor, nibh id lobortis consequat, augue elit ornare mi, ac aliquet justo odio eu nulla. Nulla ipsum nulla, iaculis nec fringilla blandit, aliquet a sem. Morbi dapibus dolor vitae libero semper sagittis. Ut hendrerit, mi a eleifend consequat, nisi neque blandit quam, nec malesuada turpis velit ac metus. Nullam a pulvinar mi. Sed lobortis sem non metus condimentum fringilla. Fusce vestibulum ultrices sapien, id molestie risus sollicitudin ultricies. Sed scelerisque posuere bibendum. Maecenas luctus, diam eget ultrices rhoncus, est elit scelerisque lectus, quis interdum mi magna in urna. Mauris vitae euismod ligula.</p>
                                            </section>
                                            <section id="portlet-pane-3">
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim eleifend luctus. Fusce vel nunc neque. Fusce pulvinar placerat vestibulum. Praesent scelerisque massa non tellus molestie eu mattis mauris tristique. In urna magna, suscipit ac vestibulum a, lobortis vel enim. Nunc egestas nisi magna. Cras aliquam gravida orci ut semper. Vivamus auctor, nibh id lobortis consequat, augue elit ornare mi, ac aliquet justo odio eu nulla. Nulla ipsum nulla, iaculis nec fringilla blandit, aliquet a sem. Morbi dapibus dolor vitae libero semper sagittis. Ut hendrerit, mi a eleifend consequat, nisi neque blandit quam, nec malesuada turpis velit ac metus. Nullam a pulvinar mi. Sed lobortis sem non metus condimentum fringilla. Fusce vestibulum ultrices sapien, id molestie risus sollicitudin ultricies. Sed scelerisque posuere bibendum. Maecenas luctus, diam eget ultrices rhoncus, est elit scelerisque lectus, quis interdum mi magna in urna. Mauris vitae euismod ligula.</p>
                                            </section>
                                        </div>
                                    </section>
                                </div>
                            </div>
                            <!-- End Tabs inside Portlet -->

                            <!-- Sidebar Tabs inside Portlet -->
                            <div class="grid_6 leading">
                                <div class="portlet">
                                    <header>
                                        <h2>Sidebar Tabs inside Portlet</h2>
                                    </header>
                                    <section>
                                        <div class="sidebar-tabs">
                                            <ul>
                                                <li><a href="#portlet-sidepane-1">Sidebar Tab 1</a></li>
                                                <li><a href="#portlet-sidepane-2">Sidebar Tab 2</a></li>
                                                <li><a href="#portlet-sidepane-3">Sidebar Tab 3</a></li>
                                            </ul>
                                            <section id="portlet-sidepane-1">
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim eleifend luctus. Fusce vel nunc neque. Fusce pulvinar placerat vestibulum. Praesent scelerisque massa non tellus molestie eu mattis mauris tristique. In urna magna, suscipit ac vestibulum a, lobortis vel enim. Nunc egestas nisi magna. Cras aliquam gravida orci ut semper. Vivamus auctor, nibh id lobortis consequat, augue elit ornare mi, ac aliquet justo odio eu nulla. Nulla ipsum nulla, iaculis nec fringilla blandit, aliquet a sem. Morbi dapibus dolor vitae libero semper sagittis. Ut hendrerit, mi a eleifend consequat, nisi neque blandit quam, nec malesuada turpis velit ac metus. Nullam a pulvinar mi. Sed lobortis sem non metus condimentum fringilla. Fusce vestibulum ultrices sapien, id molestie risus sollicitudin ultricies. Sed scelerisque posuere bibendum. Maecenas luctus, diam eget ultrices rhoncus, est elit scelerisque lectus, quis interdum mi magna in urna. Mauris vitae euismod ligula.</p>
                                            </section>
                                            <section id="portlet-sidepane-2">
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim eleifend luctus. Fusce vel nunc neque. Fusce pulvinar placerat vestibulum. Praesent scelerisque massa non tellus molestie eu mattis mauris tristique. In urna magna, suscipit ac vestibulum a, lobortis vel enim. Nunc egestas nisi magna. Cras aliquam gravida orci ut semper. Vivamus auctor, nibh id lobortis consequat, augue elit ornare mi, ac aliquet justo odio eu nulla. Nulla ipsum nulla, iaculis nec fringilla blandit, aliquet a sem. Morbi dapibus dolor vitae libero semper sagittis. Ut hendrerit, mi a eleifend consequat, nisi neque blandit quam, nec malesuada turpis velit ac metus. Nullam a pulvinar mi. Sed lobortis sem non metus condimentum fringilla. Fusce vestibulum ultrices sapien, id molestie risus sollicitudin ultricies. Sed scelerisque posuere bibendum. Maecenas luctus, diam eget ultrices rhoncus, est elit scelerisque lectus, quis interdum mi magna in urna. Mauris vitae euismod ligula.</p>
                                            </section>
                                            <section id="portlet-sidepane-3">
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim eleifend luctus. Fusce vel nunc neque. Fusce pulvinar placerat vestibulum. Praesent scelerisque massa non tellus molestie eu mattis mauris tristique. In urna magna, suscipit ac vestibulum a, lobortis vel enim. Nunc egestas nisi magna. Cras aliquam gravida orci ut semper. Vivamus auctor, nibh id lobortis consequat, augue elit ornare mi, ac aliquet justo odio eu nulla. Nulla ipsum nulla, iaculis nec fringilla blandit, aliquet a sem. Morbi dapibus dolor vitae libero semper sagittis. Ut hendrerit, mi a eleifend consequat, nisi neque blandit quam, nec malesuada turpis velit ac metus. Nullam a pulvinar mi. Sed lobortis sem non metus condimentum fringilla. Fusce vestibulum ultrices sapien, id molestie risus sollicitudin ultricies. Sed scelerisque posuere bibendum. Maecenas luctus, diam eget ultrices rhoncus, est elit scelerisque lectus, quis interdum mi magna in urna. Mauris vitae euismod ligula.</p>
                                            </section>
                                        </div>
                                    </section>
                                </div>
                            </div>
                            <!-- End Sidebar Tabs inside Portlet -->

                        </section>
                    </div>
                </section>
			<!-- ui-dialog -->

			<div id="dialog" title="Dialog Title" class="ui-helper-hidden">

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

			</div>

	<script>
	// increase the default animation speed to exaggerate the effect
	$.fx.speeds._default = 1000;
	$(function() {
		$( "#dialog" ).dialog({
			autoOpen: false,
			show: "fade",
			hide: "fade"
		})
        // IE7 FIX
        .parents('.ui-dialog').find(".ui-dialog-titlebar-close").after('<div/>');

		$( "#opener" ).click(function() {
			$( "#dialog" ).dialog( "open" );
			return false;
		});
	});
	</script>

                <!-- Main Section End -->

            </div>
        </section>
    </div>
    
    <footer>
        <div id="footer-inner" class="container_8 clearfix">
            <div class="grid_8">
                <span class="fr"><a href="#">Documentation</a> | <a href="#">Feedback</a></span>Last account activity from 127.0.0.1 - <a href="#">Details</a> | &copy; 2011. All rights reserved. Theme design by VivantDesigns
            </div>
        </div>
    </footer>

</body>
</html>